﻿<!DOCTYPE HTML PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html>
<head lang="en">
    <title>Web串口调试</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <meta name="format-detection" content="telephone=no">
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <!--<meta http-equiv="Cache-Control" content="no-siteapp" />-->
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <link rel="alternate icon" type="image/png" href="favicon.png">
    <link rel="stylesheet" href="/scripts/amazeui/amazeui.min.css" />
    <link rel="stylesheet" href="../css/main.css" />
    <script src="/scripts/jquery-3.3.1.min.js"></script>
    <script src="/scripts/amazeui/amazeui.min.js"></script>

    <script src="/scripts/jquery.signalR-2.4.1.min.js"></script>
    <style>
        body {
            padding: 25px;
            margin: auto;
        }
        .fun_bd {
            position: relative;
            background: aliceblue;
        }
        .record {
            font-size: 16px;
        }
        label{
            width:100px;
        }
        #txtReceive, #txtSend {
            width:99%
        }
        .left-panel {
            width: 20%;
            float: left;
        }
        .right-panel {
            width: 60%;
            float: left;
        }
    </style>
    <script type="text/javascript">

        var comId = ''
        var txtReceive,txtSend;
        $(function () {
            txtSend = $('#txtSend');
            txtReceive = $('#txtReceive');
            init()
        })
        function init() {
            $('#btnOpen').click(function () {
                openCom();
            })
            $('#btnClose').click(function () {
                closeCom();
            })
            $('#btnClear').click(function () {
                txtReceive.val('');
            })
            $('#btnSend').click(function () {
                var data=txtSend.val();
                dds.iot.com.send(comId, data)
            })
            
        }
        function openCom() {
            var type = $('#btnType').val();
            var port = $('#btnPort').val();
            var baudRate = $('#btnBaudRate').val();
            var extendData = $('#btnExtendData').val()
            // 启动串口
            dds.iot.com.open({
                type: type,//测试型号
                port: port,
                baudRate: baudRate,
                extendData: extendData,
                onReceive: function (res) {
                    console.log('onReceive', res)
                    var receive = txtReceive.val();
                    // 防止太多奔溃
                    if (receive.length > 2000) {
                        receive=''
                    }
                    txtReceive.val(receive + res.data + ' ')
                    txtReceive[0].scrollTop = txtReceive[0].scrollHeight;
                },
                onOpen: function (ar) {
                    if (!ar.Success) {
                        alert(ar.Message);
                    }
                    comId = ar.Data;
                }
            })
        }

        function closeCom() {
            // 关闭串口
            dds.iot.com.close(comId);
        }
    </script>

</head>

<body>
    <div class="fun_bd" style="padding-top:0px;">
        <div class="package-control">
            <div class="left-panel">
                <div class="display">
                    <div>
                       <h1>Web 串口调试工具</h1>
                    </div>
                    <div class="record" style="margin-top:0px;">
                        <div>
                            <label>驱动型号</label><input id="btnType" type="text" value="test" />
                        </div>
                        <div>
                            <label>串口号</label><input id="btnPort" type="text" value="1" />
                        </div>
                        <div>
                            <label>波特率</label><input id="btnBaudRate" type="text" value="9600" />
                        </div>
                        <div>
                            <label>扩展数据</label><input id="btnExtendData" type="text" value="{interval:100,dataBits:0,parity:0}" />
                        </div>
                    </div>
                </div>
                <div class="submit">
                    <button href="javascript:;" class="am-btn am-btn-primary" id="btnOpen">打开</button>
                    <button href="javascript:;" class="am-btn" id="btnClose">关闭</button>
                </div>
            </div>
            <div class="right-panel">
                <div class="receive">
                    <h5>接收区</h5>
                    <textarea id="txtReceive" rows="10"></textarea>
                    <a href="javascript:;" class="am-btn  am-btn-danger" id="btnClear">清空</a>
                </div>
                <div class="receive">
                    <h5>发送区</h5>
                    <textarea id="txtSend" rows="3"></textarea>
                    <a href="javascript:;" class="am-btn  am-btn-primary" id="btnSend">发送</a>
                </div>
            </div>
        </div>
    </div>

</body>

</html>